<template>
  <u-popup :show="visible" mode="center" :closeOnClickOverlay="false"  bgColor="transparent">
    <view class="modal-done-wrapper">
      <view class="tit">测试提醒</view>
      <view class="con">
        <view class="p">你已经完成{{qstnNum}}道题啦! </view>
        <view class="p">当前测试结果准确率为{{percent}}%哦~</view>
        
        <view class="btn-group">

          <view class="btn-box left-btn" @click="leftHandle">
            查看结果
          </view>
          <view class="btn-box right-btn" @click="rightHandle">
            <view class="tip-box"
              :style="{'backgroundImage':`url(${staticImgs.tipBg})`}"
            >准确率高达95%哦</view>
            继续测试，解锁32型人格
          </view>
        </view>
          
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default{
    data(){
      return{
        visible:false,
        qstnNum:24,
        percent:70,
        staticImgs:{
          tipBg: this.imgBaseURL + '/scl/question-page/xg-mbti/modal-done-tip-bg.png'
        }
      }
    },
    methods:{
      show(params){
        this.qstnNum = params?.qstnNum || 24
        this.percent = this.qstnNum == 24 ? 70 : 85 //params?.percent || 70
        
        this.visible = true
      },
      hide(){
        this.visible = false
      },
      leftHandle(){
        this.$emit('leftClick')
      },
      rightHandle(){
        this.$emit('rightClick')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .modal-done-wrapper{
    width: 610rpx;
    height: 368rpx;
    background: linear-gradient( 180deg, #FCFEFF 0%, #FCFEFE 8%, #FFEDE5 100%);
    border-radius: 14rpx;
    
    .tit{
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 34rpx;
      color: #984B29;
      line-height: 48rpx;
      text-align: center;
      font-style: normal;
      
      margin-top: 40rpx;
      margin-bottom: 30rpx;
    }
    
    .con{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      font-style: normal;
      text-align: center;  
      
      .btn-group{
        display: flex;
        justify-content: center;
        column-gap: 20rpx;
        margin-top: 60rpx;
        
        .btn-box{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #FFFFFF;
          line-height: 70rpx;
          text-align: center;
          font-style: normal;
        }
        
        .left-btn{
          width: 170rpx;
          height: 70rpx;
          background: linear-gradient( 180deg, #FFD7B1 0%, #FE8F6D 100%);
          border-radius: 35rpx;
        }
        
        .right-btn{
          width: 370rpx;
          height: 70rpx;
          background: linear-gradient( 180deg, #FFCE9E 0%, #FF7246 100%);
          border-radius: 35rpx;
          position: relative;
          
          .tip-box{
            position: absolute;
            background-size: 100% 100%;
            
            right: 0;
            top: -38rpx;
            
            width: 272rpx;
            height: 46rpx;
            
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #F72626;
            line-height: 46rpx;
            // text-shadow: 0px 2px 6px #EC764C;
            text-align: center;
            font-style: normal;
          }
        }
      }

    }
  }
</style>